<template>
  <a-layout>
    <a-layout-header :style="{ background: '#fff', padding: 0 }">
      <a-row type="flex" justify="end">
        <a-col :span="1">
          <a-popover>
            <template slot="content">
              <a-tabs :tabBarGutter="1" default-active-key="1">
                <a-tab-pane key="1">
                  <span slot="tab">
                    <a-icon type="user" />
                    个人消息
                  </span>
                  <a-card :bordered="false">
                    <div>
                      <a-row>
                        <a-col :span="3"
                          ><a-icon
                            type="zhihu"
                            :style="{ fontSize: '25px', color: 'blue' }"
                          />
                        </a-col>
                        <a-col :span="20" class="req">
                          知乎粉丝请求商家及时更新商品 ！
                        </a-col>
                      </a-row>
                    </div>
                  </a-card>
                </a-tab-pane>
                <a-tab-pane key="2">
                  <span slot="tab">
                    <a-icon type="team" />
                    粉丝群消息
                  </span>
                  <a-empty />
                </a-tab-pane>
              </a-tabs>
            </template>
            <a-badge count="1">
              <a-icon :style="{ fontSize: '20px' }" type="bell" />
            </a-badge>
          </a-popover>
        </a-col>
        <a-col :span="1">
          <a-popover>
            <template slot="content">
              <p>
                <a-icon
                  type="user"
                  class="icon"
                  :style="{ fontSize: '15px' }"
                />个人中心
              </p>
              <p>
                <a-icon
                  type="setting"
                  class="icon"
                  :style="{ fontSize: '15px' }"
                />设置
              </p>
            </template>
            <div class="avatar"><a-avatar class="abc"  src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></div>
          </a-popover>
        </a-col>
        <a-col :span="1">
          <a-icon :style="{ fontSize: '20px' }" type="sync" @click="resh" />
        </a-col>
        <a-col :span="1">
          <a-icon
            type="poweroff"
            :style="{ fontSize: '20px', color: 'blue' }"
            @click="unlogin"
          />
        </a-col>
      </a-row>
    </a-layout-header>
    <a-layout-content :style="{ margin: '24px 16px 0' }">
      <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
        <router-view></router-view>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
export default {
  methods: {
    data() {
      return {
        touxiang,
      }
    },
    resh() {
      this.$router.go(0);
    },
    unlogin() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="less" scoped>
.message {
}
.title {
  color: #fff;
}
.req {
  font-size: 16px;
}
.emty {
  width: 100%;
  padding: 0;
  margin: 0;
}
.icon {
  margin-right: 5px;
}

.abc{
  margin-bottom: 10px;
}
.ant-col{
  text-align: center;
}

</style>

